<template>
  <div class="containers">
    <div class="list" @click='goDetails(item.packageId)' v-for='(item,index) in secondList' :key='index'>
      <img :src="baseImgUrl+item.packageImage" alt="">
      <div class="btns">
        <p class='count'><span class="remain">{{item.kccount}}</span><span class='desc'>本在售</span></p>
        <p class="btn"> {{item.packageName}}</p>
        <p class="title">{{item.packageDescribe}}</p>
      </div>
    </div>

  </div>
</template>
<script>
export default {
    data() {
        return {
            secondList: [],
            baseImgUrl: this.BaseUrlImg
        }
    },
    mounted() {
        this.$http
            .post('/hotpackage/query', { page: 1, pageSize: 10 })
            .then(res => {
                this.bookList = res.data.rows

                this.secondList = []

                for (let i = 0; i < this.bookList.length; i++) {
                    this.secondList.push(this.bookList[i])
                }
                console.log(this.secondList)
            })
    },
    methods: {
        goDetails(id) {
            wx.navigateTo({
                url: '../hotLists/main?id=' + id
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.containers {
    padding: 30rpx 18rpx;
    .list {
        position: relative;
        width: 49%;
        height: 400rpx;
        float: right;
        box-sizing: border-box;
        margin-bottom: 30rpx;
        &:nth-child(2n + 1) {
            margin-right: 13rpx;
            float: left;
        }
        img {
            width: 100%;
            height: 400rpx;
        }
        .btns {
            position: absolute;
            left: 30rpx;
            bottom: 30rpx;
            .count {
                .remain {
                    font-size: 36rpx;
                    color: #fff;
                    font-weight: bolder;
                }
                .desc {
                    font-size: 26rpx;
                    color: #fff;
                }
            }
            .btn {
                margin-top: 30rpx;
                width: 218rpx;
                height: 52rpx;
                background: #fff;
                color: #2b2b2b;
                border-radius: 5px;
                font-size: 24rpx;
                line-height: 52rpx;
                text-align: center;
            }
            .title {
                font-size: 36rpx;
                color: #fff;
                font-weight: bolder;
                margin-top: 15rpx;
                line-height: 48rpx;
            }
        }
    }
}
</style>

